<template>
    <div class="all">
        <!-- <div style="text-align:center;font-size:28px;font-weight:bold;">{{$route.name}}</div> -->
        <div class="search">
            <!-- label-width="85px" -->
            <el-form ref="form" :model="platformSearch" :inline="true" size="mini">
                <el-form-item label="商品名称：">
                    <el-input v-model="platformSearch.name" clearable placeholder="请输入商品名称"></el-input>
                </el-form-item>
                <el-form-item label="订单编号：">
                    <el-input
                        v-model="platformSearch.order_number"
                        maxlength="11"
                        clearable
                        placeholder="请输入订单编号"
                    ></el-input>
                </el-form-item>
                <el-form-item label="订单状态：">
                    <!-- <el-input v-model="platformSearch.car_id" clearable placeholder="请输入车牌"></el-input> -->
                    <el-select v-model="platformSearch.state" clearable placeholder="请选订单状态">
                        <el-option v-for="(item,index) in ordertype" :key="index" :label="item" :value="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchClick(2)">查 询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- <div class="btn">
            <el-button size="medium" type="primary" @click="remove()">删 除</el-button>
        </div>-->
        <div class="table">
            <!-- 表格 -->
            <el-table
                :data="platformTable"
                border
                height="560"
                :cell-style="cellStyle"
                :header-cell-style="rowClass"
                @selection-change="allSelectionChange"
            >
                <!-- <el-table-column type="selection" width="80px"></el-table-column> -->
                <el-table-column type="index" label="序号" width="80px"></el-table-column>
                <el-table-column label="订单编号" width="200px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.order_number }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="用户" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.user_id | filname }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="商品名称" width="140px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="商品价格" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.price }}元</span>
                    </template>
                </el-table-column>
                <el-table-column label="积分" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.integral }}分</span>
                    </template>
                </el-table-column>
                <el-table-column label="图片" width="220px">
                    <template slot-scope="scope">
                        <div @click="browseStoreUrl(scope.$index, scope.row)">
                            <img :src="scope.row.image_url" style="width:60px;" alt="订单商品图片" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="数量" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.number }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="订单状态" width="100px">
                    <template slot-scope="scope">
                        <span>{{ ordertype[scope.row.state] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" width="110px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.create_time*1000 | formatDate }} {{ scope.row.create_time*1000 | formatDateBehind }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="收货信息" width="200px">
                    <template slot-scope="scope">
                        <div class="tl pl10">
                            <span>姓名：{{ scope.row.user_name }}</span><br>
                            <span>地址：{{ scope.row.address }}</span><br>
                            <span>手机：{{ scope.row.phone }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="快递" width="220px">
                    <template slot-scope="scope">
                        <div class="tl pl10">
                            <span>单号：{{ scope.row.express_num }}</span><br>
                            <span>公司：{{ scope.row.shipping_comp_name }}</span>
                        </div>
                    </template>
                </el-table-column>
                <!-- <el-table-column show-overflow-tooltip label="收货人手机号" width="200px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.reason }}</span>
                    </template>
                </el-table-column> -->
                <!-- <el-table-column label="操作" width="140px">
                    <template slot-scope="scope">
                        <el-button
                            size="small"
                            type="primary"
                            @click="edit(scope.$index, scope.row)"
                        >修改</el-button>
                        <el-button
                            size="small"
                            type="danger"
                            @click="remove(scope.$index, scope.row)"
                        >删除</el-button>
                        <span v-if="scope.row.state !== 0">已审批</span>
                        <el-button
                            v-else
                            size="small"
                            type="warning"
                            @click="approval(scope.$index, scope.row)"
                        >审批</el-button>
                    </template>
                </el-table-column> -->
            </el-table>

            <!-- 分页 -->
            <el-pagination
                @size-change="pageCount"
                @current-change="currentPageCount"
                :current-page="currentPage"
                :page-sizes="[100, 500,1000,1500, 2000]"
                :page-size="currentCount"
                layout="prev, pager, next, jumper, sizes,total"
                :total="pageResultSize"
            ></el-pagination>
        </div>
        <div>
            <el-dialog center width="700px" :visible.sync="dialogVisible">
                <div style="text-align:center;">
                    <img width="250px" height="auto" :src="dialogImageUrl" alt />
                </div>
            </el-dialog>
            <!-- 修改对话框 -->
            <!-- <el-dialog title="修改" width="60%" :visible.sync="editVisible" center @close="closeEdit">
                <el-form :model="editPlatform">
                    <el-form-item label="姓名：" :label-width="formLabelWidth">
                        {{editPlatform.name}}
                        
                    </el-form-item>
                    <el-form-item label="车牌：" :label-width="formLabelWidth">
                        {{editPlatform.car_id}}
                        
                    </el-form-item>
                    <el-form-item label="状态：" :label-width="formLabelWidth">
                        <el-radio v-model="editPlatform.status" label="1">正常</el-radio>
                        <el-radio v-model="editPlatform.status" label="2">已停用</el-radio>
                    </el-form-item>
                </el-form>
                <div slot="footer">
                    <el-button @click="cancelEdit">取 消</el-button>
                    <el-button type="primary" @click="confirmEdit">确 定</el-button>
                </div>
            </el-dialog> -->
            <!-- 审批对话框 -->
            <!-- <el-dialog
                title="审批"
                width="400px"
                :visible.sync="approvalVisible"
                center
                @close="closeApproval"
            >
                <el-form :model="approvalPlatform">
                    <el-form-item
                        label="姓名："
                        :label-width="formLabelWidth"
                    >{{approvalPlatform.name}}</el-form-item>
                    <el-form-item
                        label="车牌："
                        :label-width="formLabelWidth"
                    >{{approvalPlatform.car_id |  plateNumber }}</el-form-item>
                    <el-form-item
                        label="到期时间："
                        :label-width="formLabelWidth"
                    >{{approvalPlatform.create_time*1000 | formatDate }} {{approvalPlatform.create_time*1000 | formatDateBehind }}</el-form-item>
                    <el-form-item
                        label="合作平台："
                        :label-width="formLabelWidth"
                    >{{approvalPlatform.platform}}</el-form-item>
                </el-form>
                <div slot="footer">
                    <el-button @click="cancelApproval">拒 绝</el-button>
                    <el-button type="primary" @click="confirmApproval">通 过</el-button>
                </div>
            </el-dialog> -->
        </div>
    </div>
</template>

<script>
import "../../../static/scss/page.scss";
import utils from "../../util/request";
import {date} from "../../util/time.js"
import {formatDate} from "../../util/time.js"
var that
export default {
    data() {
        return {
            // 分页
            currentPage: 1, //初始页面
            currentCount: 100, //当前页面的数据数量
            pageResultSize: 10, //表格数据总数
            screenWidth: window.innerWidth, //可视宽度
            dialogVisible: false, //放大图片的对话框显示
            dialogImageUrl: "", //放大图片的路径
            editVisible: false, //修改对话框
            approvalVisible: false, //审批对话框
            formLabelWidth: "100px", //对话框的label宽度
            username: null,
            // editPlatform: {
            //     // 修改对话框
            //     name: "", //姓名
            //     car_id: "", //车牌
            //     status: "" //状态
            // },
            // approvalPlatform: {
            //     // 审批对话框
            //     id: "",
            //     name: "", //姓名
            //     car_id: "", //车牌
            //     create_time: "", //到期时间
            //     platform: "" //合作平台
            // },
            platformSearch: {
                //搜索
                name: "",//姓名
                order_number: "", //车牌
                state: "", //联系方式
            },
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            platformTable: [
                {
                    recordId: 1, //平台车辆Id
                    car_id: "愼襡", //用户名nickName
                    name: "123", //姓名
                    phone: "17348567495", //联系方式phone
                    vin: "深圳", //车架号
                    car_id: "粤B13512", //车牌
                    carType: "小汽车", //车辆类型
                    platform: "滴滴", //合作平台
                    create_time: "2023-09-15", //到期时间
                    createTime: "2020-09-15", //添加时间orderTime
                    status: "审批中" //状态status
                },
                {
                    recordId: 2, //平台车辆Id
                    car_id: "亦是", //用户名nickName
                    name: "123", //姓名
                    phone: "17348567495", //联系方式phone
                    vin: "深圳", //车架号
                    car_id: "粤B746d5", //车牌
                    carType: "越野", //车辆类型
                    platform: "滴滴1", //合作平台
                    create_time: "2021-10-28", //到期时间
                    createTime: "2020-09-15", //添加时间orderTime
                    status: "已通过" //状态status
                },
                {
                    recordId: 3, //平台车辆Id
                    car_id: "无畏", //用户名nickName
                    name: "123", //姓名
                    phone: "17348567495", //联系方式phone
                    vin: "深圳", //车架号
                    car_id: "粤B7s635", //车牌
                    carType: "商务", //车辆类型
                    platform: "滴滴2", //合作平台
                    create_time: "2024-09-20", //到期时间
                    createTime: "2020-07-23", //添加时间orderTime
                    status: "已拒绝" //状态status
                }
            ],
            selectTable: [], //选中要删除的数组
            ordertype:["待付款","已付款"]
        };
    },
    filters: {
        // 用户名plateNumber
        filname(id){
            if(that.username !== null){
                that.username.forEach(item=>{
                    id === item.id ? id = item.user_name : "";
                })
            }
            return id
        },
        // 时间戳转换
        formatDate(time){
			var date = new Date(time);
			return formatDate(date, 'yyyy-MM-dd');
		},
		formatDateBehind(time){
			var date = new Date(time);
			return formatDate(date, 'hh:mm:ss')
		}
    },
    methods: {
        goBack: function() {
            // 页头的返回
            this.$router.go(-1);
        },
        browseProveUrl(index, row) {
            this.dialogImageUrl = row.proveUrl;
            this.dialogVisible = true;
        },
        searchClick(num) {
            // 查询
            let data = {page:this.currentPage,list_rows:this.currentCount};
            for(var i in this.platformSearch) this.platformSearch[i] !== "" ? data[i] = String(this.platformSearch[i]) : "";
            utils.request("/goodsOrder/list","post",JSON.stringify(data)).then(resp=>{
                console.log(resp)
                this.platformTable = resp.data.data.data;
                this.pageResultSize = resp.data.data.total;
                if(num === 2){
                    resp.data.data.total 
                    ? this.$message({
                        message: "找到"+resp.data.data.total+"条运营车辆申请数据",
                        type: "success"
                    }) : this.$message("没有符合条件的数据");
                }else{return}
            }) 
        },
        browseStoreUrl(index, row) {
            this.dialogImageUrl = row.image_url;
            this.dialogVisible = true;
        },
        // edit(index, row) {
        //     // 修改
        //     this.editVisible = true;
        //     this.editPlatform.name = row.name;
        //     this.editPlatform.car_id = row.car_id;
        // },
        // confirmEdit() {
        //     // 确认修改对话框
        //     this.editVisible = false;
        // },
        // cancelEdit() {
        //     // 取消修改对话框
        //     this.editVisible = false;
        // },
        // closeEdit() {
        //     // 关闭修改对话框
        //     this.editVisible = false;
        // },
        // remove(index, row) {
        //     // 删除
        // },
        // approval(index, row) {
        //     // 审批
        //     console.log(index, row);
        //     this.approvalVisible = true;
        //     for(var i in this.approvalPlatform) this.approvalPlatform[i] = row[i];
        //     this.approvalPlatform.index = index;
        //     // this.approvalPlatform.name = row.name;
        //     // this.approvalPlatform.car_id = row.car_id;
        //     // this.approvalPlatform.create_time = row.create_time;
        //     // this.approvalPlatform.platform = row.platform;
        // },
        // confirmApproval() {
        //     // 通过审批对话框
        //     // console.log(this.approvalPlatform)
            
        //     this.$prompt("请再次确认", "提示", {
        //         confirmButtonText: "确定",
        //         cancelButtonText: "取消",
        //         inputPlaceholder: "请输入确认通过"
        //     })
        //         .then(({ value }) => {
        //             console.log(value);
        //             if (value == "确认通过") {
        //                 utils.request("/runApply/update","post",JSON.stringify({id:this.approvalPlatform.id,state:1})).then(resp=>{
        //                     console.log(resp)
        //                     if(resp.data.code === 200){
        //                         let key = this.approvalPlatform.index;
        //                         this.platformTable[key].state = 1;
        //                     }
        //                 })
        //                 this.approvalVisible = false;
        //             } else {
        //                 this.$message({
        //                     showClose: true,
        //                     type: "error",
        //                     message: "输入错误，请重新输入",
        //                     duration: 2000
        //                 });
        //             }
        //         })
        //         .catch(() => {
        //             this.$message({
        //                 showClose: true,
        //                 type: "info",
        //                 message: "取消拒绝",
        //                 duration: 2000
        //             });
        //         });
        // },
        // cancelApproval() {
        //     // 拒绝审批对话框
        //     this.$prompt("请输入拒绝原因", "提示", {
        //         confirmButtonText: "确定",
        //         cancelButtonText: "取消",
        //         inputPlaceholder: "请输入拒绝原因"
        //     })
        //         .then(({ value }) => {
        //             console.log(value);
        //             utils.request("/runApply/update","post",JSON.stringify({id:this.approvalPlatform.id,state:2,reason:value})).then(resp=>{
        //                 console.log(resp)
        //                 if(resp.data.code === 200){
        //                     let key = this.approvalPlatform.index;
        //                     this.platformTable[key].state = 2;
        //                     this.platformTable[key].reason = value;
        //                 }
        //             })
        //             this.approvalVisible = false;
        //         })
        //         .catch(() => {
        //             this.$message({
        //                 showClose: true,
        //                 type: "info",
        //                 message: "取消拒绝",
        //                 duration: 2000
        //             });
        //         });
        // },
        // closeApproval() {
        //     // 关闭审批对话框
        //     this.approvalVisible = false;
        // },
        //   表格居中
        cellStyle: function({ row, column, rowIndex, columnIndex }) {
            return "text-align:center;";
        },
        rowClass: function({ row, rowIndex }) {
            return "text-align:center;";
        },
        allSelectionChange: function(val) {
            // 获取选中的内容
            console.log(val);
            this.selectTable = val;
        },
        // 每页数据的数量
        pageCount: function(val) {
            this.currentCount = val;
            this.searchClick(1)
        },
        // 点击的第几页
        currentPageCount: function(val) {
            this.currentPage = val;
            this.searchClick(1)
        }
    },
    created() {
        utils.request("/user/list","post",JSON.stringify({page:1,list_rows:999999999})).then(resp=>{
            console.log(resp)
            this.username = resp.data.data.data;
            this.searchClick(1)
        })
    },
    computed: {},
    watch: {},
    beforeCreate() {
        that = this;
    }
};
</script>

<style scoped>
.store{
    width: calc(100% - 130px);
    padding: 20px;
    background-color: #ffffff;
    box-sizing: border-box;
    border-radius: 5px;
}
</style>

